<template>
	<view>
		<block v-if="navigationBarTextStyle == 'white'">
			<view class="navbar" :style="'height:' + navH + 'px; background:' + backgroundColor">
				<view
					:class="'navbar-action-wrap  ' + (showReturn && showHome ? 'navbar-action-group' : '') + ' row item-center'"
					v-if="showNav">
					<block v-if="showReturn">
						<view class="navbar-action_item first" @tap="navBack">
							<image src="/static/left-arrow-white.png"></image>
						</view>
					</block>
					<block v-if="showHome">
						<view class="navbar-action_item" @tap="toIndex">
							<image src="/static/home-white.png"></image>
						</view>
					</block>
				</view>
				<view class="navbar-title-white">{{title}}</view>
			</view>
		</block>

		<block v-if="navigationBarTextStyle == 'black'">
			<view class="navbar" :style="'height:' + navH + 'px; background:' + backgroundColor">
				<view
					:class="'navbar-action-wrap  ' + (showReturn && showHome ? 'navbar-action-group' : '') + ' row item-center'"
					v-if="showNav">
					<block v-if="showReturn">
						<view class="navbar-action_item first" @tap="navBack">
							<image src="/static/left-arrow.png"></image>
						</view>
					</block>
					<block v-if="showHome">
						<view class="navbar-action_item" @tap="toIndex">
							<image src="/static/home.png"></image>
						</view>
					</block>
				</view>
				<view class="navbar-title">{{title}}</view>
			</view>
		</block>

		<view v-if="hastop" class="padding"
			:style="'width:100;height:' + navH + 'px;background:' + intervalBackgroundColor + ';'"></view>
	</view>
</template>

<script>
	// components/navbar/index.js
	const app = getApp();

	export default {
		name: "navbar",
		data() {
			return {
				// showReturn: true,
				navH: ""
			};
		},

		components: {},
		props: {
			navigationBarTextStyle: {
				type: String,
				default: "white"
			},
			title: String,
			showNav: {
				type: Boolean,
				default: true
			},
			showHome: {
				type: Boolean,
				default: false
			},
			showReturn: {
				type: Boolean,
				default: false
			},
			noBackEvent: {
				type: Boolean,
				default: false
			},
			hastop: {
				//用于设置bar的高度
				type: Boolean,
				default: true
			},
			custom: false,
			backgroundColor: null,
			intervalBackgroundColor: null
		},
		options: {
			addGlobalClass: false
		},
		beforeMount: function() {
			console.log(getCurrentPages());
			// this.setData({

			// console.log(app.globalData.navHeight)
			this.navH = app.globalData.navHeight,
				this.showReturn = getCurrentPages().length > 1
			// });
		},
		// mounted() {
		//  this.$props.backgroundColor = this.$props.navigationBarTextStyle === "white" ? "white" : "black"
		// },
		methods: {
			//回退
			navBack: function() {
				this.$emit('goback', {
					detail: {}
				});

				if (!this.noBackEvent) {
					wx.navigateBack({
						delta: 1
					});
				}
			},
			//回主页
			toIndex: function() {
				// if(this.custom){
				// 	this.$emit("clickHome")
				// }else{
				// 	wx.reLaunch({
				// 	  url: '/pages/tab/home/home'
				// 	});
				// }
			},
			setTitle: function(title) {
				// this.setData({
				//   title: title
				// });
				this.title = title
			},
			setBackgroundColor: function(color) {
				this.setData({
					backgroundColor: color
				});
			}
		}
	};
</script>
<style lang="scss">
	.navbar {
		width: 100%;
		overflow: hidden;
		position: fixed;
		top: 0;
		/*  #ifdef  H5  */
		// top: calc(88rpx + constant(safe-area-inset-top));
		top: calc(88rpx + env(safe-area-inset-top));
		/*  #endif  */
		left: 0;
		z-index: 10;
	}

	.navbar-title {
		width: 100%;
		height: 46px;
		line-height: 46px;
		text-align: center;
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 10;
		color: rgb(0, 0, 0);
		font-size: 34rpx;
		font-weight: 600;
	}

	.navbar-title-white {
		width: 100%;
		height: 46px;
		line-height: 46px;
		text-align: center;
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 10;
		color: rgb(255, 255, 255);
		font-size: 36rpx;
	}

	.navbar-action-wrap {
		position: absolute;
		left: 10px;
		bottom: 7px;
		z-index: 100;
		line-height: 1;
		padding-top: 4px;
		padding-bottom: 4px;
	}

	.navbar-action-group {
		border: 1px solid #e8e8e8;
		border-radius: 20px;
		overflow: hidden;
		display: flex;
	}

	.navbar-action_item {
		/* padding: 3px 0rpx; */
		margin-left: 15rpx;
		margin-bottom: 10rpx;
		color: #333;
		height: 40rpx;
		width: 40rpx;
	}

	.navbar-action_item image {
		height: 40rpx;
		width: 40rpx;
	}

	.navbar-action-group .navbar-action_item {
		border-right: 1px solid #e8e8e8;
		padding: 1px 12px;
	}
</style>
